一.拖放API
	拖放是一种常见的特性，即抓取对象以后拖到另一个位置。虽然在HTML5之前已经可以使用mousedown,mousemove,mouseup实现拖放，但是只支持在浏览器内部的拖放，在HTML5中，拖放是标准的一部分，任何元素都能够拖放，并且支持浏览器与其他应用程序之间的数据的互相拖放，同时大大简化了拖放方面的相关代码。

学习内容：
	掌握怎么样利用拖放API使页面中的元素可以相互拖放
	掌握DataTransfer对象的属性和方法
	掌握怎样设定拖放时的视觉效果
	掌握怎样自定义拖放目标

	1. 实现拖放
		在H5中要想实现拖放操作，至少需要经过两个步骤：
		1) 将想要拖放的对象元素的draggable属性设为true,另外img与a元素默认允许拖放
		2) 编写与拖放相关的事件处理代码
		例如：
			<section>
		        <h2>基本使用</h2>
		        <div id="source" draggable="true">请拖拽我</div>
		        <hr>
		        <div id="target"></div>
		    </section>
		    <section>
        
		    <script>
		        var source = document.getElementById("source");
		        var target = document.getElementById("target");
		        //该方法在拖拽的时候激发，不能阻止事件默认行为，否者将不会出现拖拽效果
		        source.ondragstart = function (event) {
		            console.log("start-开始移动");
		            var data = event.dataTransfer;
		            data.setData("text/plain",this.id);
		        };
		        //为了兼容google浏览器与safari浏览器必须重写
		        target.ondragover = function (event) {
		            event.preventDefault();
		        }
		        target.ondrop = function (event) {
		            console.log("drop-放开");
		            var id = event.dataTransfer.getData("text/plain");
		            var source = document.getElementById(id);
		            this.appendChild(source);
		            event.preventDefault();
		            //在Firefox中阻止新页面的打开
		            event.stopPropagation();
		        }
		    </script>

	2. 拖放事件
		通过拖放事件，可以控制拖放相关的各个方面。其中最关键的地方在于确定哪里发生了拖放事件，有些事件是在被拖动的元素上触发的，有些事件是在放置目标上触发的。

		1) 拖动事件。
			dragstart
				按下鼠标并开始移动鼠标时，会在拖放的元素上触发dragstart事件。此时光标变成了“不能放”符号（圆环中有一条反斜线），表示不能把元素放到自己上面。可以通过ondragstart事件处理程序来运行JavaScript代码
			drag
				触发dragstart事件后，随即会触发drag事件，而且在元素被拖动期间会持续触发该事件（类似mousemove事件）。
			dragend
				当拖放停止时(无论是把元素放到了有效的放置目标，还是放置到了无效的放置目标上)都会触发dragend事件。

		2) 放置事件
			dragenter
				只要有元素被拖动到放置目标上，就会触发dragenter事件（类似mourseover事件）
				元素被拖出了放置目标，会触发dragleave
			dragover
				dragenter紧随其后的就是dragover事件，而且在被拖动的元素还在放置目标的范围内移动时，就会持续触发该事件。
			drop
				将拖动元素放置到目标元素上的时候会激发。

		3) 拖放事件生命周期
			dragstart->drag->dragenter->dragover->drop->dragend

	3. 自定义放置目标
		有些元素不允许放置目标元素，但是我们可以将个元素变成有效的放置目标。方法是重写dragenter和dragover事件的默认行为。
	4. dataTransfer对象
		在拖放操作时实现数据交换，它是事件对象的一个属性，用于从被拖拽元素向放置目标传递字符串格式的数据。因为它是事件对象的属性，所以只能在拖放事件的事件处理程序中访问dataTransfer对象。
		1)获取方式
			event.dataTransfer
		2)方法
			dataTransfer.getData(key);
				获取由setData保存的值
			dataTransfer.setData(key,val);
				在dataTransfer中设置值，H5对其允许指定各种MIME类型为：text/plain; text/html; text/xml; text/uri-list。
			clearData(format)
				从DataTransfer对象或ClipboardData对象中删除指定格式或全部kind值为string的数据。仅在dragstart事件中调用，在其他事件中调用会抛InvalidStateError。
			setDragImage(element,x,y)
				指定一幅图像，当拖放发生的时候，显示在光标下方。
		3)属性
			effectAllowed
				该属性与dropEffect属性结合起来可以设定拖放时的视觉效果。effectAllowed属性表示当一个元素被拖动时允许的视觉效果，一般在ondragstart事件中设定。
				取值：
					copy 	限定dropEffect的属性值为copy，否则会鼠标指针为禁止样式
		　   　  	link 	限定dropEffect的属性值为link，否则会鼠标指针为禁止样式
		           	move 	限定dropEffect的属性值为move，否则会鼠标指针为禁止样式
		           	copyLink限定dropEffect的属性值为copy和link，否则会鼠标指针为禁止样式
		           	copyMove限定dropEffect的属性值为copy和move，否则会鼠标指针为禁止样式
		           	linkMove限定dropEffect的属性值为link和move，否则会鼠标指针为禁止样式
		　　     	all 	允许dropEffect的属性值为任意值
		           	none 	鼠标指针一直为禁止样式，不管dropEffect的属性值是什么
		           	uninitialized 	没有限定dropEffect属性的值，效果和 all 一样。
		        注意：
		        	仅能在dragstart事件中设置该属性，其他事件中设置均无效。

			dropEffect
				用于设置目标元素将执行的操作，表示实际拖放时的视觉效果，一般在ondragover事件中指定。若属性值属于effectAllowed范围内，则鼠标指针将显示对应的指针样式，否则则显示禁止的指针样式。
				取值：
					link 	被拖拽元素将以超链接的形式打开资源，若属于effectAllowed范围内时，则鼠标指针显示超链接的样式，否则则显示禁止的指针样式。
		            move 	被拖拽元素将被移动到目标元素内，若属于 effectAllowed   范围内时，则鼠标指针显示移动的样式，否则则显示禁止的指针样式。
		            none 	被拖拽元素不能在目标元素上作任何操作，一直显示禁止的指针样式。除了文本框外其他元素的默认值均为none
		        注意：
		        	1) 仅能在 dragover 事件中设置该属性值，其他事件中设置均无效
		　　			2) 当显示禁止的指针样式时，将无法触发目标元素的 drop 事件。
			types
				数据类型为DOMStringList，存储DataTransfer对象中所有数据项的数据类型
			items
				数据类型为DataTransferItemList，存储DataTransfer对象中所有的数据项

	5. 实例代码
		var source = document.getElementById("dragme");
        var desc = document.getElementById("text");
        //拖放开始
        source.ondragstart = function (ev) {
            var img = document.createElement("img");
            img.src = "../images/one.png";
            var dt = ev.dataTransfer;
            dt.effectAllowed = "move";
            dt.setData("text/plain",this.id);
            dt.setDragImage(img,0,0);
        };
        desc.ondrop = function (ev) {
            var dt = ev.dataTransfer;
            var id = dt.getData("text/plain");
            var target = document.getElementById(id);
            this.appendChild(target)
            ev.preventDefault();
            ev.stopPropagation();
        }
        desc.ondragover = function (ev) {
            var dt = ev.dataTransfer;
            dt.dropEffect = "move";
            ev.preventDefault();
        }

		<div id="dragme" draggable="true">
		    请拖放
		</div>
		<div id="text">
